<!DOCTYPE html>
<html>
  <head>
    <title>UI Elements & Widgets | Flatty - Flat Administration Template</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta content='text/html;charset=utf-8' http-equiv='content-type'>
    <meta content='Flat administration template for Twitter Bootstrap. Twitter Bootstrap 3 template with Ruby on Rails support.' name='description'>
    <link href='assets/images/meta_icons/favicon.ico' rel='shortcut icon' type='image/x-icon'>
    <link href='assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
    <link href='assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
    <link href='assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
    <link href='assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
    <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
    <!-- / START - page related stylesheets [optional] -->
    <link href="assets/stylesheets/plugins/tabdrop/tabdrop.css" media="all" rel="stylesheet" type="text/css" />
    <link href="assets/stylesheets/plugins/jgrowl/jquery.jgrowl.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="assets/stylesheets/jquery/jquery_ui.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / END - page related stylesheets [optional] -->
    <!-- / bootstrap [required] -->
    <link href="assets/stylesheets/bootstrap/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / theme file [required] -->
    <link href="assets/stylesheets/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
    <!-- / coloring file [optional] (if you are going to use custom contrast color) -->
    <link href="assets/stylesheets/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / demo file [not required!] -->
    <link href="assets/stylesheets/demo.css" media="all" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
      <script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
      <script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
    <![endif]-->
  </head>
  <body class='contrast-red '>
    <header>
      <nav class='navbar navbar-default'>
        <a class='navbar-brand' href='index.html'>
          <img width="81" height="21" class="logo" alt="Flatty" src="assets/images/logo.svg" />
          <img width="21" height="21" class="logo-xs" alt="Flatty" src="assets/images/logo_xs.svg" />
        </a>
        <a class='toggle-nav btn pull-left' href='#'>
          <i class='icon-reorder'></i>
        </a>
        <ul class='nav'>
          <li class='dropdown light only-icon'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <i class='icon-cog'></i>
            </a>
            <ul class='dropdown-menu color-settings'>
              <li class='color-settings-body-color'>
                <div class='color-title'>Body color</div>
                <a data-change-to='assets/stylesheets/light-theme.css' href='#'>
                  Light
                  <small>(default)</small>
                </a>
                <a data-change-to='assets/stylesheets/dark-theme.css' href='#'>
                  Dark
                </a>
                <a data-change-to='assets/stylesheets/dark-blue-theme.css' href='#'>
                  Dark blue
                </a>
              </li>
              <li class='divider'></li>
              <li class='color-settings-contrast-color'>
                <div class='color-title'>Contrast color</div>
                            <a data-change-to="contrast-red" href="#"><i class='icon-cog text-red'></i>
                Red
                <small>(default)</small>
                </a>
    
                            <a data-change-to="contrast-blue" href="#"><i class='icon-cog text-blue'></i>
                Blue
                </a>
    
                            <a data-change-to="contrast-orange" href="#"><i class='icon-cog text-orange'></i>
                Orange
                </a>
    
                            <a data-change-to="contrast-purple" href="#"><i class='icon-cog text-purple'></i>
                Purple
                </a>
    
                            <a data-change-to="contrast-green" href="#"><i class='icon-cog text-green'></i>
                Green
                </a>
    
                            <a data-change-to="contrast-muted" href="#"><i class='icon-cog text-muted'></i>
                Muted
                </a>
    
                            <a data-change-to="contrast-fb" href="#"><i class='icon-cog text-fb'></i>
                Facebook
                </a>
    
                            <a data-change-to="contrast-dark" href="#"><i class='icon-cog text-dark'></i>
                Dark
                </a>
    
                            <a data-change-to="contrast-pink" href="#"><i class='icon-cog text-pink'></i>
                Pink
                </a>
    
                            <a data-change-to="contrast-grass-green" href="#"><i class='icon-cog text-grass-green'></i>
                Grass green
                </a>
    
                            <a data-change-to="contrast-sea-blue" href="#"><i class='icon-cog text-sea-blue'></i>
                Sea blue
                </a>
    
                            <a data-change-to="contrast-banana" href="#"><i class='icon-cog text-banana'></i>
                Banana
                </a>
    
                            <a data-change-to="contrast-dark-orange" href="#"><i class='icon-cog text-dark-orange'></i>
                Dark orange
                </a>
    
                            <a data-change-to="contrast-brown" href="#"><i class='icon-cog text-brown'></i>
                Brown
                </a>
    
              </li>
            </ul>
          </li>
          <li class='dropdown medium only-icon widget'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <i class='icon-rss'></i>
              <div class='label'>5</div>
            </a>
            <ul class='dropdown-menu'>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-user text-success'></i>
                    </div>
                    <div class='pull-left text'>
                      John Doe signed up
                      <small class='text-muted'>just now</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-inbox text-error'></i>
                    </div>
                    <div class='pull-left text'>
                      New Order #002
                      <small class='text-muted'>3 minutes ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-comment text-warning'></i>
                    </div>
                    <div class='pull-left text'>
                      America Leannon commented Flatty with veeery long text.
                      <small class='text-muted'>1 hour ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-user text-success'></i>
                    </div>
                    <div class='pull-left text'>
                      Jane Doe signed up
                      <small class='text-muted'>last week</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-inbox text-error'></i>
                    </div>
                    <div class='pull-left text'>
                      New Order #001
                      <small class='text-muted'>1 year ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='widget-footer'>
                <a href='#'>All notifications</a>
              </li>
            </ul>
          </li>
          <li class='dropdown dark user-menu'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <img width="23" height="23" alt="Mila Kunis" src="assets/images/avatar.jpg" />
              <span class='user-name'>Mila Kunis</span>
              <b class='caret'></b>
            </a>
            <ul class='dropdown-menu'>
              <li>
                <a href='user_profile.html'>
                  <i class='icon-user'></i>
                  Profile
                </a>
              </li>
              <li>
                <a href='user_profile.html'>
                  <i class='icon-cog'></i>
                  Settings
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='sign_in.html'>
                  <i class='icon-signout'></i>
                  Sign out
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <form action='search_results.html' class='navbar-form navbar-right hidden-xs' method='get'>
          <button class='btn btn-link icon-search' name='button' type='submit'></button>
          <div class='form-group'>
            <input value="" class="form-control" placeholder="Search..." autocomplete="off" id="q_header" name="q" type="text" />
          </div>
        </form>
      </nav>
    </header>
    <div id='wrapper'>
      <div id='main-nav-bg'></div>
      <nav id='main-nav'>
        <div class='navigation'>
          <div class='search'>
            <form action='search_results.html' method='get'>
              <div class='search-wrapper'>
                <input value="" class="search-query form-control" placeholder="Search..." autocomplete="off" name="q" type="text" />
                <button class='btn btn-link icon-search' name='button' type='submit'></button>
              </div>
            </form>
          </div>
          <ul class='nav nav-stacked'>
            <li class=''>
              <a href='index.html'>
                <i class='icon-dashboard'></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li class=''>
                      <a class="dropdown-collapse" href="#"><i class='icon-edit'></i>
              <span>Forms</span>
              <i class='icon-angle-down angle-down'></i>
              </a>
      
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='form_styles.html'>
                    <i class='icon-caret-right'></i>
                    <span>Form styles and features</span>
                  </a>
                </li>
                <li class=''>
                  <a href='form_components.html'>
                    <i class='icon-caret-right'></i>
                    <span>Form components</span>
                  </a>
                </li>
                <li class=''>
                  <a href='validations.html'>
                    <i class='icon-caret-right'></i>
                    <span>Validations</span>
                  </a>
                </li>
                <li class=''>
                  <a href='wizard.html'>
                    <i class='icon-caret-right'></i>
                    <span>Wizard</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a class='dropdown-collapse in' href='#'>
                <i class='icon-tint'></i>
                <span>UI Elements & Widgets</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='in nav nav-stacked'>
                <li class='active'>
                  <a href='ui_elements.html'>
                    <i class='icon-caret-right'></i>
                    <span>UI Elements</span>
                  </a>
                </li>
                <li class=''>
                  <a href='widgets.html'>
                    <i class='icon-caret-right'></i>
                    <span>Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='buttons_and_icons.html'>
                <i class='icon-star'></i>
                <span>Buttons & Icons</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-cogs'></i>
                <span>Components</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='charts.html'>
                    <i class='icon-bar-chart'></i>
                    <span>Charts</span>
                  </a>
                </li>
                <li class=''>
                  <a href='address_book.html'>
                    <i class='icon-envelope'></i>
                    <span>Address book</span>
                  </a>
                </li>
                <li class=''>
                  <a href='chats.html'>
                    <i class='icon-comments'></i>
                    <span>Chats</span>
                  </a>
                </li>
                <li class=''>
                  <a href='filetrees.html'>
                    <i class='icon-list-ul'></i>
                    <span>File trees</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fileupload.html'>
                    <i class='icon-file'></i>
                    <span>Fileupload</span>
                  </a>
                </li>
                <li class=''>
                  <a href='todo.html'>
                    <i class='icon-list-alt'></i>
                    <span>Todo list</span>
                  </a>
                </li>
                <li class=''>
                  <a href='wysiwyg.html'>
                    <i class='icon-paste'></i>
                    <span>WYSIWYG</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='tables.html'>
                <i class='icon-table'></i>
                <span>Tables</span>
              </a>
            </li>
            <li class=''>
              <a href='grid.html'>
                <i class='icon-th'></i>
                <span>Grid</span>
              </a>
            </li>
            <li class=''>
              <a href='type.html'>
                <i class='icon-font'></i>
                <span>Typography</span>
              </a>
            </li>
            <li class=''>
              <a href='calendar.html'>
                <i class='icon-calendar'></i>
                <span>Calendar</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-book'></i>
                <span>Example pages</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='invoice.html'>
                    <i class='icon-money'></i>
                    <span>Invoice</span>
                  </a>
                </li>
                <li class=''>
                  <a href='gallery.html'>
                    <i class='icon-picture'></i>
                    <span>Gallery</span>
                  </a>
                </li>
                <li class=''>
                  <a href='timeline.html'>
                    <i class='icon-time'></i>
                    <span>Timeline</span>
                  </a>
                </li>
                <li class=''>
                  <a href='pricing_tables.html'>
                    <i class='icon-table'></i>
                    <span>Pricing tables</span>
                  </a>
                </li>
                <li class=''>
                  <a href='user_profile.html'>
                    <i class='icon-user'></i>
                    <span>User profile</span>
                  </a>
                </li>
                <li class=''>
                  <a href='err404.html' target='_blank'>
                    <i class='icon-question-sign'></i>
                    <span>404 Error</span>
                  </a>
                </li>
                <li class=''>
                  <a href='err500.html' target='_blank'>
                    <i class='icon-cogs'></i>
                    <span>500 Error</span>
                  </a>
                </li>
                <li class=''>
                  <a href='sign_in.html' target='_blank'>
                    <i class='icon-signin'></i>
                    <span>Sign in</span>
                  </a>
                </li>
                <li class=''>
                  <a href='faq.html'>
                    <i class='icon-bullhorn'></i>
                    <span>FAQ</span>
                  </a>
                </li>
                <li class=''>
                  <a href='orders.html'>
                    <i class='icon-inbox'></i>
                    <span>Orders</span>
                  </a>
                </li>
                <li class=''>
                  <a href='search_results.html'>
                    <i class='icon-search'></i>
                    <span>Search results</span>
                  </a>
                </li>
                <li class=''>
                  <a href='blank.html'>
                    <i class='icon-circle-blank'></i>
                    <span>Blank page</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-cog'></i>
                <span>Layouts</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='closed_navigation.html'>
                    <i class='icon-caret-right'></i>
                    <span>Closed navigation</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_header.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed header</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_navigation.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed navigation</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_navigation_and_header.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed navigation & header</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='email_templates.html'>
                <i class='icon-mail-reply'></i>
                <span>Email templates</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse' href='#'>
                <i class='icon-folder-open-alt'></i>
                <span>Four level dropdown</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li>
                  <a class='dropdown-collapse' href='#'>
                    <i class='icon-caret-right'></i>
                    <span>Second level</span>
                    <i class='icon-angle-down angle-down'></i>
                  </a>
                  <ul class='nav nav-stacked'>
                    <li>
                      <a class='dropdown-collapse' href='#'>
                        <i class='icon-caret-right'></i>
                        <span>Third level</span>
                        <i class='icon-angle-down angle-down'></i>
                      </a>
                      <ul class='nav nav-stacked'>
                        <li>
                          <a href='#'>
                            <i class='icon-caret-right'></i>
                            <span>Fourth level</span>
                          </a>
                        </li>
                        <li>
                          <a href='#'>
                            <i class='icon-caret-right'></i>
                            <span>Another fourth level</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <section id='content'>
        <div class='container'>
          <div class='row' id='content-wrapper'>
            <div class='col-xs-12'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='page-header'>
                    <h1 class='pull-left'>
                      <i class='icon-tint'></i>
                      <span>UI Elements</span>
                    </h1>
                    <div class='pull-right'>
                      <ul class='breadcrumb'>
                        <li>
                          <a href='index.html'>
                            <i class='icon-bar-chart'></i>
                          </a>
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li>
                          UI Elements & Widgets
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li class='active'>UI Elements</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header group-header-first'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Accordions</h2>
                      <small class='text-muted'>Accordions can be colored with multiple colors!</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-4 box'>
                  <div class='box-header'>
                    <div class='title'>Red</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='accordion accordion-contrast panel-group' id='accordion' style='margin-bottom:0;'>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion' data-toggle='collapse' href='#collapseOne-accordion'>
                            Vero nam
                          </a>
                        </div>
                        <div class='panel-collapse collapse in' id='collapseOne-accordion'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion' data-toggle='collapse' href='#collapseTwo-accordion'>
                            Sit nemo ducimus laborum
                          </a>
                        </div>
                        <div class='panel-collapse collapse' id='collapseTwo-accordion'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion' data-toggle='collapse' href='#collapseThree-accordion'>
                            Dicta cumque perspiciatis.
                          </a>
                        </div>
                        <div class='panel-collapse collapse' id='collapseThree-accordion'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-4 box'>
                  <div class='box-header'>
                    <div class='title'>Blue</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='accordion accordion-blue panel-group' id='accordion1' style='margin-bottom:0;'>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion1' data-toggle='collapse' href='#collapseOne-accordion1'>
                            Vero nam
                          </a>
                        </div>
                        <div class='panel-collapse collapse in' id='collapseOne-accordion1'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion1' data-toggle='collapse' href='#collapseTwo-accordion1'>
                            Sit nemo ducimus laborum
                          </a>
                        </div>
                        <div class='panel-collapse collapse' id='collapseTwo-accordion1'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion1' data-toggle='collapse' href='#collapseThree-accordion1'>
                            Dicta cumque perspiciatis.
                          </a>
                        </div>
                        <div class='panel-collapse collapse' id='collapseThree-accordion1'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-4 box'>
                  <div class='box-header'>
                    <div class='title'>Green</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='accordion accordion-green panel-group' id='accordion2' style='margin-bottom:0;'>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion2' data-toggle='collapse' href='#collapseOne-accordion2'>
                            Vero nam
                          </a>
                        </div>
                        <div class='panel-collapse collapse in' id='collapseOne-accordion2'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion2' data-toggle='collapse' href='#collapseTwo-accordion2'>
                            Sit nemo ducimus laborum
                          </a>
                        </div>
                        <div class='panel-collapse collapse' id='collapseTwo-accordion2'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                      <div class='panel panel-default'>
                        <div class='panel-heading'>
                          <a class='accordion-toggle' data-parent='#accordion2' data-toggle='collapse' href='#collapseThree-accordion2'>
                            Dicta cumque perspiciatis.
                          </a>
                        </div>
                        <div class='panel-collapse collapse' id='collapseThree-accordion2'>
                          <div class='panel-body'>
                            Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Tabs</h2>
                      <small class='text-muted'>Tabs can be aligned to the top, right, left and bottom sides. There are responsive tabs too!</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12 box' style='margin-bottom: 0'>
                  <div class='box-header orange-background'>
                    <div class='title'>Responsive tabs</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <strong>Resize window to see responsive tabs.</strong>
                    <div class='tabbable' style='margin-top: 20px'>
                      <ul class='nav nav-responsive nav-tabs'>
                        <li class='active'>
                          <a data-toggle='tab' href='#retab1'>
                            Section 1
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab2'>
                            Section 2
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab3'>
                            Section 3
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab4'>
                            Section 4
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab5'>
                            Section 5
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab6'>
                            Section 6
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab7'>
                            Section 7
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab8'>
                            Section 8
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab9'>
                            Section 9
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab10'>
                            Section 10
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab11'>
                            Section 11
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab12'>
                            Section 12
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab13'>
                            Section 13
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab14'>
                            Section 14
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab15'>
                            Section 15
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab16'>
                            Section 16
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab17'>
                            Section 17
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab18'>
                            Section 18
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab19'>
                            Section 19
                          </a>
                        </li>
                        <li class=''>
                          <a data-toggle='tab' href='#retab20'>
                            Section 20
                          </a>
                        </li>
                      </ul>
                      <div class='tab-content'>
                                  <div id="retab1" class="tab-pane active"><p>I'm in Section 1.</p>
                        </div>
              
                                  <div id="retab2" class="tab-pane "><p>I'm in Section 2.</p>
                        </div>
              
                                  <div id="retab3" class="tab-pane "><p>I'm in Section 3.</p>
                        </div>
              
                                  <div id="retab4" class="tab-pane "><p>I'm in Section 4.</p>
                        </div>
              
                                  <div id="retab5" class="tab-pane "><p>I'm in Section 5.</p>
                        </div>
              
                                  <div id="retab6" class="tab-pane "><p>I'm in Section 6.</p>
                        </div>
              
                                  <div id="retab7" class="tab-pane "><p>I'm in Section 7.</p>
                        </div>
              
                                  <div id="retab8" class="tab-pane "><p>I'm in Section 8.</p>
                        </div>
              
                                  <div id="retab9" class="tab-pane "><p>I'm in Section 9.</p>
                        </div>
              
                                  <div id="retab10" class="tab-pane "><p>I'm in Section 10.</p>
                        </div>
              
                                  <div id="retab11" class="tab-pane "><p>I'm in Section 11.</p>
                        </div>
              
                                  <div id="retab12" class="tab-pane "><p>I'm in Section 12.</p>
                        </div>
              
                                  <div id="retab13" class="tab-pane "><p>I'm in Section 13.</p>
                        </div>
              
                                  <div id="retab14" class="tab-pane "><p>I'm in Section 14.</p>
                        </div>
              
                                  <div id="retab15" class="tab-pane "><p>I'm in Section 15.</p>
                        </div>
              
                                  <div id="retab16" class="tab-pane "><p>I'm in Section 16.</p>
                        </div>
              
                                  <div id="retab17" class="tab-pane "><p>I'm in Section 17.</p>
                        </div>
              
                                  <div id="retab18" class="tab-pane "><p>I'm in Section 18.</p>
                        </div>
              
                                  <div id="retab19" class="tab-pane "><p>I'm in Section 19.</p>
                        </div>
              
                                  <div id="retab20" class="tab-pane "><p>I'm in Section 20.</p>
                        </div>
              
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12 box' style='margin-bottom: 0'>
                  <div class='box-header purple-background'>
                    <div class='title'>Tabs on top and bottom</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='row'>
                      <div class='col-sm-6'>
                        <div class='tabbable'>
                          <ul class='nav nav-tabs'>
                            <li class='active'>
                              <a data-toggle='tab' href='#tab1'>
                                <i class='icon-indent-left'></i>
                                Section 1
                              </a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#tab2'>
                                <i class='icon-edit text-red'></i>
                                Section 2
                              </a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#tab3'>
                                <i class='icon-ambulance text-blue'></i>
                                Section 3
                              </a>
                            </li>
                          </ul>
                          <div class='tab-content'>
                            <div class='tab-pane active' id='tab1'>
                              <p>I'm in Section 1.</p>
                            </div>
                            <div class='tab-pane' id='tab2'>
                              <p>Howdy, I'm in Section 2.</p>
                            </div>
                            <div class='tab-pane' id='tab3'>
                              <p>What up girl, this is Section 3.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class='col-sm-6'>
                        <div class='tabbable tabs-below'>
                          <div class='tab-content'>
                            <div class='tab-pane active' id='A'>
                              <p>I'm in Section 1.</p>
                            </div>
                            <div class='tab-pane' id='B'>
                              <p>Howdy, I'm in Section 2.</p>
                            </div>
                            <div class='tab-pane' id='C'>
                              <p>What up girl, this is Section 3.</p>
                            </div>
                          </div>
                          <ul class='nav nav-tabs'>
                            <li class='active'>
                              <a data-toggle='tab' href='#A'>Section 1</a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#B'>Section 2</a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#C'>Section 3</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6 box'>
                  <div class='box-header blue-background'>
                    <div class='title'>Centered tabs</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='tabbable'>
                      <ul class='nav nav-tabs nav-tabs-centered'>
                        <li class='active'>
                          <a data-toggle='tab' href='#tabcenter1'>
                            <i class='icon-indent-left'></i>
                            Section 1
                          </a>
                        </li>
                        <li>
                          <a data-toggle='tab' href='#tabcenter2'>
                            <i class='icon-edit text-red'></i>
                            Section 2
                          </a>
                        </li>
                      </ul>
                      <div class='tab-content'>
                        <div class='tab-pane active' id='tabcenter1'>
                          <p>I'm in Section 1.</p>
                        </div>
                        <div class='tab-pane' id='tabcenter2'>
                          <p>Howdy, I'm in Section 2.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6 box' style='margin-bottom: 0'>
                  <div class='box-header red-background'>
                    <div class='title'>Simple tabs</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='tabbable'>
                      <ul class='nav nav-tabs nav-tabs-simple'>
                        <li class='active'>
                          <a class='green-border' data-toggle='tab' href='#tabsimple1'>
                            <i class='icon-indent-left'></i>
                            Section 1
                          </a>
                        </li>
                        <li>
                          <a data-toggle='tab' href='#tabsimple2'>
                            <i class='icon-edit text-red'></i>
                            Section 2
                          </a>
                        </li>
                      </ul>
                      <div class='tab-content'>
                        <div class='tab-pane active' id='tabsimple1'>
                          <p>I'm in Section 1.</p>
                        </div>
                        <div class='tab-pane' id='tabsimple2'>
                          <p>Howdy, I'm in Section 2.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12 box'>
                  <div class='box-header green-background'>
                    <div class='title'>Tabs on left and right</div>
                  </div>
                  <div class='box-content'>
                    <div class='row'>
                      <div class='col-sm-6'>
                        <div class='tabbable tabs-left'>
                          <ul class='nav nav-tabs'>
                            <li class='active'>
                              <a data-toggle='tab' href='#lA'>
                                <span class='label label-important'>10</span>
                                Section 1
                              </a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#lB'>
                                <span class='label label-success'>1</span>
                                Section 2
                              </a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#lC'>
                                <span class='label label-warning'>0</span>
                                Section 3
                              </a>
                            </li>
                          </ul>
                          <div class='tab-content'>
                            <div class='tab-pane active' id='lA'>
                              <p>I'm in Section 1.</p>
                            </div>
                            <div class='tab-pane' id='lB'>
                              <p>Howdy, I'm in Section 2.</p>
                            </div>
                            <div class='tab-pane' id='lC'>
                              <p>What up girl, this is Section 3.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class='col-sm-6'>
                        <div class='tabbable tabs-right'>
                          <ul class='nav nav-tabs'>
                            <li class='active'>
                              <a data-toggle='tab' href='#rA'>Section 1</a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#rB'>Section 2</a>
                            </li>
                            <li>
                              <a data-toggle='tab' href='#rC'>Section 3</a>
                            </li>
                          </ul>
                          <div class='tab-content'>
                            <div class='tab-pane active' id='rA'>
                              <p>I'm in Section 1.</p>
                            </div>
                            <div class='tab-pane' id='rB'>
                              <p>Howdy, I'm in Section 2.</p>
                            </div>
                            <div class='tab-pane' id='rC'>
                              <p>What up girl, this is Section 3.</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Attention</h2>
                      <small class='text-muted'>Some features that may increase attention of user.</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-6 box'>
                  <div class='box-header'>
                    <div class='title'>Modals</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='padding' style='padding:50px'>
                      <div class='modal' style='position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;display:block;'>
                        <div class='modal-dialog' style='width:auto;'>
                          <div class='modal-content'>
                            <div class='modal-header'>
                              <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
                              <h4 class='modal-title'>Modal title</h4>
                            </div>
                            <div class='modal-body'>
                              <p>One fine body…</p>
                            </div>
                            <div class='modal-footer'>
                              <button class='btn btn-primary' type='button'>Save changes</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class='text-center'>
                      <a class='btn btn-danger btn-lg' id='alert-example'>Alert</a>
                      <a class='btn btn-success btn-lg' data-toggle='modal' href='#modal-example' role='button'>Launch big modal</a>
                      <a class='btn btn-info btn-lg' data-toggle='modal' href='#modal-example2' role='button'>Launch modal with form</a>
                    </div>
                    <div class='modal fade' id='modal-example' tabindex='-1'>
                      <div class='modal-dialog'>
                        <div class='modal-content'>
                          <div class='modal-header'>
                            <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
                            <h4 class='modal-title' id='myModalLabel'>Modal Heading</h4>
                          </div>
                          <div class='modal-body'>
                            <h4>Text in a modal</h4>
                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                            <hr>
                            <h4>Overflowing text to show scroll behavior</h4>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                          </div>
                          <div class='modal-footer'>
                            <button class='btn btn-default' data-dismiss='modal' type='button'>Close</button>
                            <button class='btn btn-primary' type='button'>Save changes</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class='modal fade' id='modal-example2' tabindex='-1'>
                      <div class='modal-dialog'>
                        <div class='modal-content'>
                          <div class='modal-header'>
                            <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
                            <h4 class='modal-title' id='myModalLabel'>Modal with form</h4>
                          </div>
                          <div class='modal-body'>
                                          <form class="form" style="margin-bottom: 0;" method="post" action="#" accept-charset="UTF-8"><input name="authenticity_token" type="hidden" /><div class='form-group'>
                              <label for='inputText1'>Text field</label>
                              <input class='form-control' id='inputText1' placeholder='Text field' type='text'>
                            </div>
                            <div class='form-group'>
                              <label for='inputPassword4'>Password field</label>
                              <input class='form-control' id='inputPassword4' placeholder='Password field' type='password' value='Top secret!'>
                            </div>
                            <div class='form-group'>
                              <label for='inputTextArea1'>Textarea</label>
                              <textarea class='form-control' id='inputTextArea1' placeholder='Textarea' rows='3'></textarea>
                            </div>
                            <div class='form-group'>
                              <label for='disabledInput1'>Disabled input</label>
                              <input class='form-control' disabled='' id='disabledInput1' placeholder='Disabled input here...' type='text'>
                            </div>
                            <hr class='hr-normal'>
                            <div class='form-group'>
                              <label>Checkboxes</label>
                              <div class='checkbox'>
                                <label>
                                  <input type='checkbox' value=''>
                                  autem quas sint ut ab
                                </label>
                              </div>
                              <div class='checkbox'>
                                <label>
                                  <input type='checkbox' value=''>
                                  expedita delectus odit modi optio
                                </label>
                              </div>
                              <div class='checkbox'>
                                <label>
                                  <input type='checkbox' value=''>
                                  qui est
                                </label>
                              </div>
                            </div>
                            </form>
              
                          </div>
                          <div class='modal-footer'>
                            <button class='btn btn-default' data-dismiss='modal' type='button'>Close</button>
                            <button class='btn btn-primary' type='button'>Save changes</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6 box'>
                  <div class='row'>
                    <div class='col-sm-12 box'>
                      <div class='box-header'>
                        <div class='title'>Tooltips</div>
                        <div class='actions'>
                          <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                          </a>
                          
                          <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                          </a>
                        </div>
                      </div>
                      <div class='box-content'>
                        <div class='btn has-tooltip' data-placement='top' title='Top'>Top</div>
                        <div class='btn has-tooltip' data-placement='right' title='Right'>Right</div>
                        <div class='btn has-tooltip' data-placement='bottom' title='Bottom'>Bottom</div>
                        <div class='btn has-tooltip' data-placement='left' title='Left'>Left</div>
                      </div>
                    </div>
                  </div>
                  <div class='row'>
                    <div class='col-sm-12 box'>
                      <div class='box-header'>
                        <div class='title'>Popovers</div>
                        <div class='actions'>
                          <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                          </a>
                          
                          <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                          </a>
                        </div>
                      </div>
                      <div class='box-content'>
                        <div class='btn has-popover' data-content='Vel excepturi ut voluptates eaque eaque non ducimus illo rerum' data-placement='top' data-title='Top'>Top</div>
                        <div class='btn has-popover' data-content='Eaque officia voluptas necessitatibus unde ipsam molestiae maiores velit est' data-placement='right' data-title='Right'>Right</div>
                        <div class='btn has-popover' data-content='Ex odio quisquam porro atque et id optio quaerat praesentium' data-placement='bottom' data-title='Bottom'>Bottom</div>
                        <div class='btn has-popover' data-content='Atque repellendus recusandae non qui ut voluptatem illo id similique' data-placement='left' data-title='left'>Left</div>
                      </div>
                    </div>
                  </div>
                  <div class='row'>
                    <div class='col-sm-12 box' style='margin-bottom: 0;'>
                      <div class='box-header'>
                        <div class='title'>Notifications</div>
                        <div class='actions'>
                          <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                          </a>
                          
                          <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                          </a>
                        </div>
                      </div>
                      <div class='box-content'>
                        <div class='btn' id='notification1'>Classic</div>
                        <div class='btn' id='notification2'>Waits for close</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Other stuff</h2>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-6 box'>
                  <div class='box-header'>
                    <div class='title'>Autocomplete</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <input class='form-control' data-items='4' data-provide='typeahead' data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]' placeholder='USA country name' style='margin: 0 auto;' type='text'>
                  </div>
                </div>
                <div class='col-sm-6 box' style='margin-bottom:0'>
                  <div class='box-header'>
                    <div class='title'>
                      <i class='icon-spinner icon-spin'></i>
                      AJAX loaders
                    </div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <i class='icon-2x icon-spinner icon-spin'></i>
                    <img src="assets/images/ajax-loaders/1.gif" />
                    <img src="assets/images/ajax-loaders/2.gif" />
                    <img src="assets/images/ajax-loaders/3.gif" />
                    <img src="assets/images/ajax-loaders/4.gif" />
                    <img src="assets/images/ajax-loaders/5.gif" />
                    <img src="assets/images/ajax-loaders/6.gif" />
                    <img src="assets/images/ajax-loaders/7.gif" />
                    <img src="assets/images/ajax-loaders/8.gif" />
                    <img src="assets/images/ajax-loaders/9.gif" />
                    <img src="assets/images/ajax-loaders/10.gif" />
                    <img src="assets/images/ajax-loaders/11.gif" />
                    <img src="assets/images/ajax-loaders/12.gif" />
                    <img src="assets/images/ajax-loaders/13.gif" />
                    <img src="assets/images/ajax-loaders/14.gif" />
                    <img src="assets/images/ajax-loaders/15.gif" />
                    <img src="assets/images/ajax-loaders/16.gif" />
                    <img src="assets/images/ajax-loaders/17.gif" />
                    <img src="assets/images/ajax-loaders/18.gif" />
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6 box box-nomargin'>
                  <div class='box-header'>
                    <div class='title'>Dynamic timeago</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <span class='has-tooltip' data-placement='top' id='timeago-example' title='May 16, 2013 21:35'>May 16, 2013 21:35</span>
                    <br>
                    <span class='timeago has-tooltip' data-placement='top' title='May 16, 2013 21:35'>May 16, 2013 21:35</span>
                    <br>
                    <span class='timeago has-tooltip' data-placement='top' title='May 16, 2012 21:35'>May 16, 2013 21:35</span>
                  </div>
                </div>
                <div class='col-sm-6 box' style='margin-bottom: 0;'>
                  <div class='box-header'>
                    <div class='title'>Buttons toggle</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <p>Inline checkboxes masked as buttons.</p>
                    <div class='btn-group' data-toggle='buttons'>
                      <label class='btn btn-primary'>
                        <input type='checkbox'>
                        Option 1
                      </label>
                      <label class='btn btn-primary'>
                        <input type='checkbox'>
                        Option 2
                      </label>
                      <label class='btn btn-primary'>
                        <input type='checkbox'>
                        Option 3
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12 box' style='margin-bottom:0'>
                  <div class='box-header'>
                    <div class='title'>Sliders</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='row'>
                      <div class='col-sm-6'>
                        <div id='slider-example'>
                          <span style='height:120px; float:left; margin:15px'>88</span>
                          <span style='height:120px; float:left; margin:15px'>77</span>
                          <span style='height:120px; float:left; margin:15px'>55</span>
                          <span style='height:120px; float:left; margin:15px'>33</span>
                          <span style='height:120px; float:left; margin:15px'>40</span>
                          <span style='height:120px; float:left; margin:15px'>45</span>
                          <span style='height:120px; float:left; margin:15px'>70</span>
                          <div class='clearfix'></div>
                        </div>
                      </div>
                      <div class='col-sm-6'>
                        <strong>Snap to increments</strong>
                        <div class='text-right'>
                          <small id='slider-example1-amount'></small>
                        </div>
                        <div id='slider-example1' style='margin-bottom: 20px; clear: both;'></div>
                        <strong>Range slider</strong>
                        <div class='text-right'>
                          <small id='slider-example2-amount'></small>
                        </div>
                        <div id='slider-example2'></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6 box box-nomargin'>
                  <div class='box-header blue-background'>
                    <div class='title'>Drag & Drop nestable list</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='dd dd-nestable'>
                      <ol class='dd-list'>
                        <li class='dd-item' data-id='1'>
                          <div class='dd-handle'>
                            <i class='icon-ambulance text-green'></i>
                            Item 1
                          </div>
                        </li>
                        <li class='dd-item' data-id='2'>
                          <div class='dd-handle'>
                            <i class='icon-backward text-purple'></i>
                            Item 2
                          </div>
                          <ol class='dd-list'>
                            <li class='dd-item' data-id='3'>
                              <div class='dd-handle'>
                                <i class='icon-camera-retro text-orange'></i>
                                Item 3
                              </div>
                              <ol class='dd-list'>
                                <li class='dd-item' data-id='4'>
                                  <div class='dd-handle'>Item 4</div>
                                </li>
                              </ol>
                            </li>
                          </ol>
                        </li>
                      </ol>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6 box' style='margin-bottom:0'>
                  <div class='box-header purple-background'>
                    <div class='title'>Carousel</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='carousel slide' id='myCarousel' style='margin-bottom:0;'>
                      <ol class='carousel-indicators'>
                        <li data-slide-to='0' data-target='#myCarousel'></li>
                        <li data-slide-to='1' data-target='#myCarousel'></li>
                        <li class='active' data-slide-to='2' data-target='#myCarousel'></li>
                      </ol>
                      <div class='carousel-inner'>
                        <div class='active item'><img src="http://placehold.it/460x200&text=1" /></div>
                        <div class='item'><img src="http://placehold.it/460x200/143249/fff&text=2" /></div>
                        <div class='item'><img src="http://placehold.it/460x200/f34541/fff&text=3" /></div>
                      </div>
                      <a class='left carousel-control' data-slide='prev' href='#myCarousel'>
                        <span class='icon-angle-left icon-prev'></span>
                      </a>
                      <a class='right carousel-control' data-slide='next' href='#myCarousel'>
                        <span class='icon-angle-right icon-next'></span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12 box' style='margin-bottom:0'>
                  <div class='box-header blue-background'>
                    <div class='title'>Responsive navbar</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <nav class='navbar navbar-default' role='navigation'>
                      <div class='navbar-header'>
                        <button class='navbar-toggle' data-target='.navbar-ex1-collapse' data-toggle='collapse' type='button'>
                          <span class='sr-only'>Toggle navigation</span>
                          <span class='icon-bar'></span>
                          <span class='icon-bar'></span>
                          <span class='icon-bar'></span>
                        </button>
                        <a class='navbar-brand' href='#'>Brand</a>
                      </div>
                      <div class='collapse navbar-collapse navbar-ex1-collapse'>
                        <ul class='nav navbar-nav'>
                          <li class='active'>
                            <a href='#'>Link</a>
                          </li>
                          <li>
                            <a href='#'>Link</a>
                          </li>
                          <li class='dropdown'>
                            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                              Dropdown
                              <b class='caret'></b>
                            </a>
                            <ul class='dropdown-menu'>
                              <li>
                                <a href='#'>Action</a>
                              </li>
                              <li>
                                <a href='#'>Another action</a>
                              </li>
                              <li>
                                <a href='#'>Something else here</a>
                              </li>
                              <li>
                                <a href='#'>Separated link</a>
                              </li>
                              <li>
                                <a href='#'>One more separated link</a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                        <form class='navbar-form navbar-left' role='search'>
                          <div class='form-group'>
                            <input class='form-control' placeholder='Search' type='text'>
                          </div>
                          <button class='btn btn-default' type='submit'>Submit</button>
                        </form>
                        <ul class='nav navbar-nav navbar-right'>
                          <li>
                            <a href='#'>Link</a>
                          </li>
                          <li class='dropdown'>
                            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                              Dropdown
                              <b class='caret'></b>
                            </a>
                            <ul class='dropdown-menu'>
                              <li>
                                <a href='#'>Action</a>
                              </li>
                              <li>
                                <a href='#'>Another action</a>
                              </li>
                              <li>
                                <a href='#'>Something else here</a>
                              </li>
                              <li>
                                <a href='#'>Separated link</a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </nav>
                    <nav class='navbar navbar-inverse' role='navigation'>
                      <div class='navbar-header'>
                        <button class='navbar-toggle' data-target='.navbar-ex1-collapse' data-toggle='collapse' type='button'>
                          <span class='sr-only'>Toggle navigation</span>
                          <span class='icon-bar'></span>
                          <span class='icon-bar'></span>
                          <span class='icon-bar'></span>
                        </button>
                        <a class='navbar-brand' href='#'>Brand</a>
                      </div>
                      <div class='collapse navbar-collapse navbar-ex1-collapse'>
                        <ul class='nav navbar-nav'>
                          <li class='active'>
                            <a href='#'>Link</a>
                          </li>
                          <li>
                            <a href='#'>Link</a>
                          </li>
                          <li class='dropdown'>
                            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                              Dropdown
                              <b class='caret'></b>
                            </a>
                            <ul class='dropdown-menu'>
                              <li>
                                <a href='#'>Action</a>
                              </li>
                              <li>
                                <a href='#'>Another action</a>
                              </li>
                              <li>
                                <a href='#'>Something else here</a>
                              </li>
                              <li>
                                <a href='#'>Separated link</a>
                              </li>
                              <li>
                                <a href='#'>One more separated link</a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                        <form class='navbar-form navbar-left' role='search'>
                          <div class='form-group'>
                            <input class='form-control' placeholder='Search' type='text'>
                          </div>
                          <button class='btn btn-default' type='submit'>Submit</button>
                        </form>
                        <ul class='nav navbar-nav navbar-right'>
                          <li>
                            <a href='#'>Link</a>
                          </li>
                          <li class='dropdown'>
                            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                              Dropdown
                              <b class='caret'></b>
                            </a>
                            <ul class='dropdown-menu'>
                              <li>
                                <a href='#'>Action</a>
                              </li>
                              <li>
                                <a href='#'>Another action</a>
                              </li>
                              <li>
                                <a href='#'>Something else here</a>
                              </li>
                              <li>
                                <a href='#'>Separated link</a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </nav>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6 box box-nomargin'>
                  <div class='box-header orange-background'>
                    <div class='title'>Paginations</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div>
                      <ul class='pagination pagination-lg'>
                        <li>
                          <a href='#'>«</a>
                        </li>
                        <li class='active'>
                          <a href='#'>1</a>
                        </li>
                        <li>
                          <a href='#'>2</a>
                        </li>
                        <li>
                          <a href='#'>3</a>
                        </li>
                        <li>
                          <a href='#'>4</a>
                        </li>
                        <li>
                          <a href='#'>5</a>
                        </li>
                        <li>
                          <a href='#'>»</a>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <ul class='pagination'>
                        <li>
                          <a href='#'>«</a>
                        </li>
                        <li>
                          <a href='#'>1</a>
                        </li>
                        <li>
                          <a href='#'>2</a>
                        </li>
                        <li>
                          <a href='#'>3</a>
                        </li>
                        <li class='active'>
                          <a href='#'>4</a>
                        </li>
                        <li>
                          <a href='#'>5</a>
                        </li>
                        <li>
                          <a href='#'>»</a>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <ul class='pagination pagination-sm'>
                        <li>
                          <a href='#'>«</a>
                        </li>
                        <li class='active'>
                          <a href='#'>1</a>
                        </li>
                        <li>
                          <a href='#'>2</a>
                        </li>
                        <li>
                          <a href='#'>3</a>
                        </li>
                        <li>
                          <a href='#'>4</a>
                        </li>
                        <li>
                          <a href='#'>5</a>
                        </li>
                        <li>
                          <a href='#'>»</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6 box' style='margin-bottom:0'>
                  <div class='box-header red-background'>
                    <div class='title'>Pagers</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <ul class='pager'>
                      <li>
                        <a href='#'>Previous</a>
                      </li>
                      <li>
                        <a href='#'>Next</a>
                      </li>
                    </ul>
                    <ul class='pager'>
                      <li class='previous'>
                        <a href='#'>
                          <i class='icon-chevron-left'></i>
                          Older
                        </a>
                      </li>
                      <li class='next'>
                        <a href='#'>
                          Newer
                          <i class='icon-chevron-right'></i>
                        </a>
                      </li>
                    </ul>
                    <ul class='pager'>
                      <li class='previous disabled'>
                        <a href='#'>
                          <i class='icon-chevron-left'></i>
                          Older
                        </a>
                      </li>
                      <li class='next'>
                        <a href='#'>
                          Newer
                          <i class='icon-chevron-right'></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6 box box-nomargin'>
                  <div class='box-header purple-background'>
                    <div class='title'>Labels</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <span class='label label-default'>Default</span>
                    <span class='label label-success'>Success</span>
                    <span class='label label-important'>Important</span>
                    <span class='label label-warning'>Warning</span>
                    <span class='label label-info'>Info</span>
                    <span class='label label-inverse'>Inverse</span>
                  </div>
                </div>
                <div class='col-sm-6 box' style='margin-bottom:0'>
                  <div class='box-header green-background'>
                    <div class='title'>Badges</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <span class='badge badge-default'>Default</span>
                    <span class='badge badge-success'>Success</span>
                    <span class='badge badge-important'>Important</span>
                    <span class='badge badge-warning'>Warning</span>
                    <span class='badge badge-info'>Info</span>
                    <span class='badge badge-inverse'>Inverse</span>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12 box' style='margin-bottom:0'>
                  <div class='box-header blue-background'>
                    <div class='title'>Alerts</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content box-double-padding'>
                    <div class='row'>
                      <div class='col-sm-6'>
                        <div class='alert alert-info alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <i class='icon-info-sign'></i>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                        <div class='alert alert-info alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <h4>
                            <i class='icon-info-sign'></i>
                            Info
                          </h4>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                        <div class='alert alert-danger alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <i class='icon-remove-sign'></i>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                        <div class='alert alert-danger alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <h4>
                            <i class='icon-remove-sign'></i>
                            Error
                          </h4>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                      </div>
                      <div class='col-sm-6'>
                        <div class='alert alert-success alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <i class='icon-ok-sign'></i>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                        <div class='alert alert-success alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <h4>
                            <i class='icon-ok-sign'></i>
                            Success
                          </h4>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                        <div class='alert alert-warning alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <i class='icon-exclamation-sign'></i>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                        <div class='alert alert-warning alert-dismissable'>
                                      <a class="close" data-dismiss="alert" href="#">&times;
                          </a>
              
                          <h4>
                            <i class='icon-exclamation-sign'></i>
                            Warning
                          </h4>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-12 box'>
                  <div class='box-header'>
                    <div class='title'>Progress bars</div>
                    <div class='actions'>
                      <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                      </a>
                      
                      <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                      </a>
                    </div>
                  </div>
                  <div class='box-content'>
                    <div class='row'>
                      <div class='col-sm-6'>
                        <div class='progress'>
                          <div class='progress-bar progress-bar-primary' style='width:60%;'>60%</div>
                        </div>
                        <div class='progress'>
                          <div class='progress-bar progress-bar-success' style='width:70%;'>70%</div>
                        </div>
                        <div class='progress'>
                          <div class='progress-bar progress-bar-danger' style='width:20%;'>20%</div>
                        </div>
                        <div class='progress'>
                          <div class='progress-bar progress-bar-warning' style='width:10%;'>10%</div>
                        </div>
                        <div class='progress'>
                          <div class='progress-bar progress-bar-info' style='width:40%;'>40%</div>
                        </div>
                        <div class='progress'>
                          <div class='progress-bar progress-bar-success' style='width: 35%'>35%</div>
                          <div class='progress-bar progress-bar-warning' style='width: 20%'>20%</div>
                          <div class='progress-bar progress-bar-danger' style='width: 10%'>10%</div>
                        </div>
                      </div>
                      <div class='col-sm-6'>
                        <div class='progress progress-small'>
                          <div class='progress-bar progress-bar-primary' style='width:60%;'>60%</div>
                        </div>
                        <div class='progress progress-small'>
                          <div class='progress-bar progress-bar-success' style='width:70%;'>70%</div>
                        </div>
                        <div class='progress progress-small'>
                          <div class='progress-bar progress-bar-danger' style='width:20%;'>20%</div>
                        </div>
                        <div class='progress progress-small'>
                          <div class='progress-bar progress-bar-warning' style='width:10%;'>10%</div>
                        </div>
                        <div class='progress progress-small'>
                          <div class='progress-bar progress-bar-info' style='width:40%;'>40%</div>
                        </div>
                        <div class='progress progress-small'>
                          <div class='progress-bar progress-bar-success' style='width: 35%'>35%</div>
                          <div class='progress-bar progress-bar-warning' style='width: 20%'>20%</div>
                          <div class='progress-bar progress-bar-danger' style='width: 10%'>10%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer id='footer'>
            <div class='footer-wrapper'>
              <div class='row'>
                <div class='col-sm-6 text'>
                  Copyright © 2013 Your Project Name
                </div>
                <div class='col-sm-6 buttons'>
                  <a class="btn btn-link" href="http://www.bublinastudio.com/flatty">Preview</a>
                  <a class="btn btn-link" href="https://wrapbootstrap.com/theme/flatty-flat-administration-template-WB0P6NR1N">Purchase</a>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </section>
    </div>
    <!-- / jquery [required] -->
    <script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
    <!-- / jquery mobile (for touch events) -->
    <script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>
    <!-- / jquery migrate (for compatibility with new jquery) [required] -->
    <script src="assets/javascripts/jquery/jquery-migrate.min.js" type="text/javascript"></script>
    <!-- / jquery ui -->
    <script src="assets/javascripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
    <!-- / jQuery UI Touch Punch -->
    <script src="assets/javascripts/plugins/jquery_ui_touch_punch/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
    <!-- / bootstrap [required] -->
    <script src="assets/javascripts/bootstrap/bootstrap.js" type="text/javascript"></script>
    <!-- / modernizr -->
    <script src="assets/javascripts/plugins/modernizr/modernizr.min.js" type="text/javascript"></script>
    <!-- / retina -->
    <script src="assets/javascripts/plugins/retina/retina.js" type="text/javascript"></script>
    <!-- / theme file [required] -->
    <script src="assets/javascripts/theme.js" type="text/javascript"></script>
    <!-- / demo file [not required!] -->
    <script src="assets/javascripts/demo.js" type="text/javascript"></script>
    <!-- / START - page related files and scripts [optional] -->
    <script src="assets/javascripts/plugins/tabdrop/bootstrap-tabdrop.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/jgrowl/jquery.jgrowl.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/typeahead/typeahead.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/timeago/jquery.timeago.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/nestable/jquery.nestable.js" type="text/javascript"></script>
    <script>
      $("#alert-example").live("click", function(e) {
        bootbox.alert({
          message: "I am alert!",
        });
        return false;
      });
      
      
      $("#notification1").live("click", function(e) {
        $.jGrowl("Lorem ipsum dolor sit amet...");
        return false;
      });
      
      $("#notification2").live("click", function(e) {
        $.jGrowl("Lorem ipsum dolor sit amet...", {
          sticky: true
        });
        return false;
      });
      
      var date, months, timeago;
      selector = $("#timeago-example");
      date = new Date();
      months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      timeago = selector;
      timeago.attr("title", "" + months[date.getMonth()] + " " + (date.getDate()) + ", " + (date.getFullYear()) + " " + (date.getHours()) + ":" + (date.getMinutes()));
      timeago.text("" + months[date.getMonth()] + " " + (date.getDate()) + ", " + (date.getFullYear()) + " " + (date.getHours()) + ":" + (date.getMinutes()));
      timeago.timeago();
      
      
      $("#slider-example > span").each(function() {
        var value;
        value = parseInt($(this).text(), 10);
        return $(this).empty().slider({
          value: value,
          range: "min",
          animate: true,
          orientation: "vertical"
        });
      });
      
      $("#slider-example1").slider({
        value: 100,
        min: 0,
        max: 500,
        step: 50,
        slide: function(event, ui) {
          return $("#slider-example1-amount").text("$" + ui.value);
        }
      });
      
      $("#slider-example1-amount").text("$" + $("#slider-example1").slider("value"));
      
      $("#slider-example2").slider({
        range: true,
        min: 0,
        max: 500,
        values: [75, 300],
        slide: function(event, ui) {
          return $("#slider-example2-amount").text("$" + ui.values[0] + " - $" + ui.values[1]);
        }
      });
      
      $("#slider-example2-amount").text("$" + $("#slider-example2").slider("values", 0) + " - $" + $("#slider-example2").slider("values", 1));
    </script>
    <!-- / END - page related files and scripts [optional] -->
  </body>
</html>
